<template>
  <div class="goods">
    <header class="goods-header">{{props.title}}</header>
    <van-skeleton title  :row="3" :loading="!props.newGoodses.length">
      <div class="goods-box">
        <div class="good-item" v-for="item in newGoodses " :key="goodsId" @click="goToDetail(item)">
          <img :src="item.goodsCoverImg" alt="">
          <div class="goods-desc">
            <div class="title">{{ item.goodsName }}</div>
            <div class="price">￥{{ item.sellingPrice }}</div>
          </div>
        </div>
      </div>
    </van-skeleton>
  </div>
</template>

<script setup>
import { useRouter} from 'vue-router'
const router=useRouter()
const props = defineProps({
  newGoodses: Array,
  title:String
})

const goToDetail=(item)=>{  //点击传详情商品goodsId
  console.log(item.goodsId);
  router.push({path:`/product/${item.goodsId}`})
}
</script>

<style lang="less" scoped>
@import '../assets/variable.less';

.goods {
  &-header {
    background: #f9f9f9;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: @primary;
    font-size: 16px;
    font-weight: 500;
  }

  &-box {
    display: flex;
    flex-wrap: wrap;

    .good-item {
      width: 50%;
      border-bottom: 1px solid #e9e9e9;
      padding: 10px;
      box-sizing: border-box; //让容器的内边距减少自己的宽度，而不是撑大
      
      img {
        width: 120px;
        display: flex;
        margin: 0 auto;
      }

      .goods-desc {
        text-align: center;
        font-size: 14px;
        padding: 10px 0;
      }

      &:nth-child(2n +1) {
        border-right: 1px solid #e9e9e9;
      }

      .title {
        color: #222333;
      }

      .price {
        
        color: @primary;
      }
    }
  }
}</style>